<template>
  <div>
    <el-container>
      <el-header>
        <PostHeader />
      </el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>
          <div>
            <TabBanner v-for="(v, i) in tabData" :key="i" :item="v">
              <template #default v-if="i === 0">
                <div style="width: 246px; height: 375px;border: 1px solid #ccc;margin-right: 20px;">
                  <div style="font-size: 100px;">+</div>
                  <img
                    src="https://asset.eqh5.com/67eea5475f2443729fcdd3b16737cfe8.jpg?imageMogr2/quality/80/format/webp/"
                    alt="">
                </div>
              </template>
            </TabBanner>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import PostHeader from '@/components/post-header/index.vue';
import TabBanner from '@/components/tab-banner/index.vue';
import { TabItemState } from '@/types';
import axios from 'axios'
import { onMounted, ref } from 'vue';
const tabData = ref<TabItemState[]>([])
onMounted(() => {
  axios.get('/tab').then(resp => {
    console.log(resp.data.tab)
    tabData.value = resp.data.tab
  })
})
</script>